<template>
  <div>
      <div style="width: 90%;margin: 30px auto">
          <!--   表格   -->
          <el-table :data="categoryList" stripe>
              <el-table-column label="分类id" prop="id"></el-table-column>
              <el-table-column label="分类名称" prop="name"></el-table-column>
              <el-table-column label="分类描述" prop="description"></el-table-column>
              <el-table-column label="操作">
                  <template slot-scope="scope">
                      <el-button type="primary" size="mini" @click="handleEditCategory(scope.row)">修改</el-button>
                      <el-button type="danger" icon="el-icon-delete" warning size="mini" @click="deleteCategory(scope.row.id)">删除</el-button>
                  </template>
              </el-table-column>
          </el-table>
          <!--      新增-->
          <div style="text-align: center">
              <el-button @click="add" type="primary" style="margin: 30px;width: 150px">新增</el-button>
          </div>

      </div>
<!--      弹窗-->
      <!--icon修改弹窗-->
      <el-dialog title="修改商品类别" :visible.sync="dialogFormVisible">
          <el-form :model="entity" >
              <el-form-item label="分类名称" label-width="100px" prop="name">
                  <el-input v-model="entity.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="分类描述" label-width="100px" prop="description">
                  <el-input v-model="entity.description" autocomplete="off"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取
                  消</el-button>
              <el-button type="primary" @click=" updateCategory(entity)">确
                  定</el-button>
          </div>
      </el-dialog>







  </div>
</template>

<script>
    import API from '../../../utils/request'
    export default {
        name: "Category",
        data(){
            return{
                categoryList: [],
                dialogFormVisible : false,
                entity: {},

            }
        },
        created() {
            // this.user = localStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : {}
            this.load()
            // console.log(this.iconStore)
        },
        methods:{
            load() {
                API.get('/api/category/list').then((res) => {
                    this.categoryList = res.data
                    console.log(this.icons)
                })
            },
            deleteCategory(id) {
                console.log(id)
                this.request.get('/api/category/delete', { params: { id } } ).then((res) => {
                    if (res.code === '200') {
                        this.$message.success('删除成功')
                        this.dialogFormVisible = false
                        this.load()
                    } else {
                        this.$message.error('删除失败')
                    }
                })
            },
            //修改
            handleEditCategory(row) {
                this.entity = JSON.parse(JSON.stringify(row))
                this.dialogFormVisible = true
            },
            updateCategory(entity) {
                this.request.post('/api/category/update', entity).then((res) => {
                    if (res.code === '200') {
                        this.$message.success('修改成功')
                        this.dialogFormVisible = false
                        this.load()
                    } else {
                        this.$message.error('修改失败')
                    }
                })
            },
            add() {
                this.dialogFormVisible = true,
                    this.entity = {}
            },

        },

    }
</script>

<style scoped>

</style>